<template>
	<view class="container">
		<view class="avator">
			<view class="item" @click="editAvatar">
				<text>头像</text>
				<view class="item_r">
					<image :src="userInfo.avatar" mode=""></image>
					<image class="right" src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="list_item">
				<text>昵称</text>
				<view class="item_r" @click='nick'>
					<text>{{userInfo.nickname}}</text>
					<image class="right" src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list_item">
				<text>手机号码</text>
				<!-- <view class="item_r" @click="editPhone">
					<text>{{userInfo.mobile}}</text>
					<image class="right" src="/static/img/detail/right.png" mode="widthFix"></image>
				</view> -->
				<view class="item_r">
					<text>{{userInfo.mobile}}</text>
				</view>
			</view>
		</view>

		<view class="btn">
			<button type="default" @click="exit">退出登录</button>
		</view>

		<view class="editNick" v-if="nickName" @click="nick">
			<view class="con">
				<view class="edit" @click.stop="stop">
					<input type="text" value="" placeholder="请输入新的用户名" v-model="newName" />
					<button type="default" @click="editNick">确认</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getUserInfo,
		editUserInfo
	} from '../../../api/api.js'
	import {
		config
	} from '../../../utils/config.js'
	export default {
		data() {
			return {
				nickName: false,
				userInfo: {},
				newName: ''
			}
		},
		onLoad() {

		},
		onShow() {
			this.userInfo = uni.getStorageSync('user')
		},
		methods: {
			getInfo() {
				getUserInfo().then(res => {
					console.log(res)
					this.userInfo = res.data
					uni.setStorageSync('user', res.data)
				})
			},
			nick(e) {
				this.nickName = !this.nickName
			},
			stop(e) {
				e.stopPropagation()
			},
			editNick(avator) {
				// if(avator){

				// }
				let data = {
					nickname: this.newName
				}
				editUserInfo(data).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
						this.nickName = false
						this.getInfo()
					} else {}
				})
			},
			editAvatar() {
				let that = this;
				let url = config.base_url + '/api/common/upload'
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album'],
					success: (res) => {
						console.log(res)
						const temp = res.tempFilePaths[0]
						uni.uploadFile({
							url: url,
							filePath: temp,
							fileType: 'image',
							name: 'file',
							success(res2) {
								console.log(res2)
								let data = JSON.parse(res2.data)
								let user = uni.getStorageSync('user')
								user.avatar = data.data.fullurl
								uni.setStorageSync('user', user)
								let avator = {
									avatar: data.data.fullurl
								}
								editUserInfo(avator).then(res => {
									if (res.code == 1) {
										uni.showToast({
											icon: 'none',
											title: '修改成功'
										})
										uni.redirectTo({
											url: '/pages/agent/user/info'
										})
									} else {}
								})
							}
						})
					}
				})

			},
			editPhone() {
				uni.navigateTo({
					url: '/pages/agent/user/phone?phone=' + this.phone
				})
			},
			exit(){
				uni.clearStorageSync()
				uni.reLaunch({
					url:'/pages/login/login'
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: calc(100% - 30upx);
		background-color: #f6f6f6;
		padding-top: 30upx;
	}

	.editNick {
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: 0.3);
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.con {
			width: 70%;
			height: 300upx;
			background-color: #FFFFFF;
			border-radius: 10upx;

			.edit {
				width: 80%;
				margin: 50upx auto;

				input {
					height: 80upx;
					border-bottom: 1upx solid #f7f7f7;
				}

				button {
					height: 90upx;
					background-color: #3eb9ff;
					color: #FFFFFF;
					border-radius: 45upx;
					margin-top: 30upx;
				}
			}

		}
	}


	.avator,
	.list {

		background-color: #FFFFFF;


		.item,
		.list_item {
			width: 90%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 0;

			.item_r {
				color: #838383;
				display: flex;
				min-width: 100upx;
				align-items: center;
				justify-content: space-between;

				image {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
				}
			}
		}

	}

	.list {
		margin-top: 30upx;

		.list_item {
			min-height: 70upx;
			border-bottom: 1upx solid #f7f7f7;
		}
	}

	.btn {
		width: calc(100%);
		height: 90upx;
		border-radius: 45upx;
		position: absolute;
		bottom: 30upx;
		left: 30upx;

		button {
			background-color: #3eb9ff;
			height: 100%;
			border-radius: 45upx;
			color: #FFFFFF;
		}
	}

	.right {
		width: 15upx !important;
		margin-left: 20upx;
	}
</style>
